<template>
    <view class="payment tn-safe-area-inset-bottom">
        <tn-navbar z-index="1" index-url="/pages/mine/order/buyerOrder" fixed :bottom-shadow="false">卖家收款信息</tn-navbar>
        <view class="payment-info">

            <view class="payment-info-order">
                <view class="price" @click="copy('price')">￥{{ orderPrice }}<tn-icon class="" icon="copy"></tn-icon></view>
                <view class="price-desc">待付金额</view>
            </view>
            <view class="payment-info-content">
                <view class="payment-subs">
                    <!-- <tn-tabs :data="tabsData" :current="0" @change="tabClick"></tn-tabs> -->
                    <tn-subsection v-model="subsectionValue" :data="subsectionData" active-color="tn-bg-main"
                        @change="subClick"></tn-subsection>
                </view>
                <view class="payment-bank" v-show="subsectionValue === 0">
                    <view class="payment-bank-item tn-flex-row">
                        <view class="item-name-text tn-flex-1">姓名</view>
                        <view class="item-name-value tn-flex-4">
                            {{ payment.accountName }}
                        </view>
                        <view class="item-text tn-flex-1" @click="copy('seller_name')">
                            <tn-icon class="" icon="copy"></tn-icon>
                        </view>
                    </view>

                    <view class="payment-bank-item tn-flex-row">
                        <view class="item-name-text tn-flex-1">卡号</view>
                        <view class="item-name-value tn-flex-4">
                            {{ payment.accountNumber }}
                        </view>
                        <view class="item-text tn-flex-1" @click="copy('bank_no')">
                            <tn-icon class="" icon="copy"></tn-icon>
                        </view>
                    </view>

                    <view class="payment-bank-item tn-flex-row">
                        <view class="item-name-text tn-flex-1">开户行</view>
                        <view class="item-name-value tn-flex-4">
                            {{ payment.bankName }}
                        </view>
                        <view class="item-text tn-flex-1" @click="copy('bank_name')">
                            <tn-icon class="" icon="copy"></tn-icon>
                        </view>
                    </view>

                </view>

                <!-- 支付宝 -->
                <view class="img-pay" v-show="subsectionValue === 1">
                    <img :src="payment.alipay" />
                </view>
                <!-- 微信 -->
                <view class="img-pay" v-show="subsectionValue === 2">
                    <img :src="payment.wxpay" />
                </view>
            </view>

        </view>
        <tn-toast ref="toast"></tn-toast>
    </view>
</template>
  
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";

import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnButton from "@/tuniao-ui/components/tn-button/src/Button.vue";
import TnIcon from "@/tuniao-ui/components/tn-icon/src/Icon.vue";
import TnToast from "@/tuniao-ui/components/tn-toast/src/Toast.vue";
import TnSubsection from "@/tuniao-ui/components/tn-subsection/src/Subsection.vue";
import { useUserStore } from "@/tuniao-ui/store/user";
import { ResultEnum } from "@/enums/httpEnum";
import { Payment } from "@/pages/mine/payment/lib/Payment";
import { navBack } from "@/tuniao-ui/utils";
import { SubSectionData } from "@/tuniao-ui/types";
import { findPaymentByMemberId } from "@/api/payment";
import { onLoad } from "@dcloudio/uni-app";

const userStore = useUserStore();

// 分段器数据
const subsectionData: SubSectionData[] = [
    { name: "银行卡" },
    { name: "支付宝" },
    { name: "微信" },
];
const subsectionValue = ref(0);
const currentIndex = ref(0);

const payment: Payment = reactive({
    id: 0,
    memberId: 0,
    bankCode: "",
    bankName: "",
    accountName: "",
    accountNumber: "",
    alipay: "",
    wxpay: "",
});

const orderPrice = ref(0);
const sellerId = ref(0);

const toast = ref<InstanceType<typeof TnToast>>();

function subClick(index: any) {

}

function copy(type: string) {
    let data: any = "";
    if (type === "price") {
        data = orderPrice.value;
    }
    if (type === "seller_name") {
        data = payment.accountName;
    }

    if (type === "bank_name") {
        data = payment.bankName;
    }

    if (type === "bank_no") {
        data = payment.accountNumber;
    }

    uni.setClipboardData({
        showToast: false,
        data: data,
        success: function () {
            //console.log("复制成功");
            toast.value?.show({
                title: "复制成功",
            });
        },
    });
}


onLoad((options: any) => {
    orderPrice.value = options.orderPrice;
    sellerId.value = options.sellerId;
    if (sellerId.value === 0) {
        navBack();
    }

    findPaymentByMemberId({ memberId: sellerId.value }).then((res) => {
        console.log(res);
        const paymentInfo = res.result;
        Object.assign(payment, paymentInfo);
    });
})
</script>
  
<style lang="scss" scoped>
.payment-info {
    background-color: #fff;
    margin: 20rpx;
    border-radius: 10rpx;
    height: 800rpx;

    &-order {
        text-align: center;
        padding-top: 30rpx;

        .price {
            font-size: 40rpx;
            font-weight: bold;
        }

        .price-desc {
            margin-top: 20rpx;
            color: #ccc;
        }
    }

    &-content {
        margin: 40rpx;

        .payment-bank {
            margin-top: 20rpx;

            &-item {
                margin-top: 40rpx;
                border-bottom: 1px solid #ccc;
                padding-bottom: 20rpx;

                .item-text {
                    justify-content: center;
                }

                .item-name-text {
                    justify-content: flex-end;
                }

                .item-name-value {
                    padding-left: 20rpx;
                    color: #999;
                }

            }
        }

        .img-pay {
            margin-top: 40rpx;

            img {
                width: 100%;
            }
        }
    }
}
</style>
  